<template>
    <div class="com_container">
        <div class="com_chart" ref="rank_ref">

        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    // 组件名称
    name: 'rankChart',
    data() {
        return {
            allData: [],
            startValue: 0,
            endValue: 9,
            timeId: null,
            loading: null
        }
    },
    methods: {
        // 初始化echarts实例对象
        async initChart() {
            this.chartInstance = this.$echarts.init(this.$refs.rank_ref, this.theme)
            // 对图表初始化配置
            const initOption = {
                title: {
                    text: '地区销售排行',
                    left: 20,
                    top: 5
                },
                grid: {
                    top: '30%',
                    left: '5%',
                    rigth: '5%',
                    bottom: '5%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis'
                },
                xAxis: {
                    type: 'category'
                },
                yAxis: {
                    type: 'value'
                },
                series: {
                    type: 'bar'
                }
            }
            this.chartInstance.setOption(initOption)
            this.chartInstance.on('mouseover', () => {
                clearInterval(this.timeId)
            })
            this.chartInstance.on('mouseout', () => {
                this.startInterval()
            })
        },
        // 获取服务器数据
        getData(ret) {
            // ws调用getData的时候自动传入图标数据当作形参
            this.allData = ret
            this.allData.sort((a, b) => { return b.value - a.value })
            this.updateChart()
            this.startInterval()
        },
        // 更新图表
        updateChart() {
            const colorArr = [
                ['#0BA82C', '#4FF778'],
                ['#2E72BF', '#23E5E5'],
                ['#5052EE', '#AB6EE5']
            ]
            const porArr = this.allData.map(item => item.name)
            const saleArr = this.allData.map(item => item.value)
            const dataOption = {
                xAxis: {
                    data: porArr
                },
                series: [
                    {
                        data: saleArr,
                        itemStyle: {
                            color: arg => {
                                let curColor = []
                                if (arg.value > 250) {
                                    curColor = colorArr[0]
                                }
                                else if (arg.value > 150) {
                                    curColor = colorArr[1]
                                }
                                else {
                                    curColor = colorArr[2]
                                }
                                return new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                    {
                                        offset: 0,
                                        color: curColor[0]
                                    },
                                    {
                                        offset: 1,
                                        color: curColor[1]
                                    }
                                ])
                            }
                        },
                        label: {
                            show: true,
                            position: 'top',
                            color: 'white'
                        },
                        // 隐藏指示线
                        labelLine: {
                            show: false
                        },
                    }
                ],
                dataZoom: {
                    show: false,
                    startValue: this.startValue,
                    endValue: this.endValue
                }
            }
            if (this.loading) {
                this.loading.close()
            }
            this.chartInstance.setOption(dataOption)
        },
        // 自适应配置更新
        adapter() {
            const titleFontSize = document.body.clientWidth / 100 * 1.15
            const adapterOption = {
                title: {
                    fontSize: titleFontSize
                },
                series: [
                    {
                        barWidth: titleFontSize,
                        itemStyle: {
                            borderRadius: [titleFontSize / 2, titleFontSize / 2, 0, 0]
                        }
                    }
                ]
            }
            this.chartInstance.setOption(adapterOption)
            this.chartInstance.resize()
        },
        startInterval() {
            if (this.timeId) {
                clearInterval(this.timeId)
            }
            this.timeId = setInterval(() => {
                this.startValue++
                this.endValue++
                if (this.endValue > this.allData.length - 1) {
                    this.startValue = 0
                    this.endValue = 9
                }
                this.updateChart()
            }, 2000)
        }
    },
    created() {
        // 注册回调函数
        this.$scoket.registerCallBack('rankData', this.getData)
    },
    mounted() {
        this.initChart()
        this.loading = this.$loading({
            target: this.$refs.rank_ref,
            lock: true,
            text: 'Loading',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        });
        // 获取数据需要使用客户端向服务端发送数据来获取
        this.$scoket.send({
            // 指明此次获取的信息
            action: 'getData',
            socketType: 'rankData',
            chartName: 'rank',
            value: ''
        })
        window.addEventListener('resize', this.adapter)
        this.adapter()
    },
    destroyed() {
        window.removeEventListener('resize', this.adapter)
        clearInterval(this.timeId)
        this.$scoket.unregisterCallBack('rankData')

    },
    computed: {
        ...mapState(['theme'])
    },
    watch: {
        theme() {
            console.log('zhuti');
            this.chartInstance.dispose()
            this.initChart()
            this.adapter()
            this.updateChart()
        }
    },
}
</script> 

<style scoped lang='less'>

</style>
